/**
 * @this ValidateFailAnimate: 验证失败，展示动画
 *
 * @flow
 *
 * 可以移植的 Form
 */
import React, { Component } from 'react'
import {
  Animated,
  StyleSheet,
  Easing
} from 'react-native'
import PropTypes from 'prop-types'

export default class ValidateFailAnimate extends Component {
  constructor(props) {
    super(props)
    this.state = {
      translateX: new Animated.Value(0),
    }
  }

  static propTypes = {
    style: PropTypes.number,
  }

  render() {
    let { style, children } = this.props
    const { translateX } = this.state

    style = [styles.container, {
      transform: [{ translateX }]
    }].concat(style)
    return (
      <Animated.View style={style} >
        {children}
      </Animated.View>
    )
  }

  createAnimates = () => {
    const animates = []
    for (let i = 0; i < 8; i++) {
      animates.push(Animated.timing(
        this.state.translateX, {
          toValue: i % 2 ? 8 : -8,
          duration: 50,
          easing: Easing.spring,
          useNativeDriver: true,
        }
      ))
    }
    animates.push(Animated.timing(
      this.state.translateX, {
        toValue: 0,
        duration: 25,
        easing: Easing.spring,
        useNativeDriver: true,
      }
    ))
    return animates
  }

  startAnimation() {
    Animated.sequence(this.createAnimates()).start()
  }
}

const styles = StyleSheet.create({
  container: {

  },
})